<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
</head>
<style>
body {
    margin:0px;
    padding:0px;
}

#snakebox{
    border-bottom: 1px solid #000;
}

#snakebox div{
    height: calc(4vw);
}

#snakebox span{
    display: inline-block;
    width:calc(4vw);
    height:calc(4vw);
}

#snakebox span.black{
    background-color: #000;
}

.btn{
    width:50%;
    height:50px;
    line-height: 50px;
    text-align: center;
    border:1px solid #000;
    margin:20px auto 0px auto;
}
</style>
<body>
    <div id="app">
        <div id="snakebox">
            <div v-for="(itemx,index) in boxArr">
                <span v-for="(item,index) in itemx" v-bind:class="{black:(item.snake || item.food)}"></span>
            </div>
        </div>
        <div class="btn" v-if="gameState===0" @click="startGame">开始游戏</div>
        <div class="btn" v-if="gameState===1" @click="pauseGame">暂停游戏</div>
        <div class="btn" v-if="gameState===2" @click="restartGame">恢复游戏</div>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script src="app.js"></script>